<template>
    <div>
        <el-button style="float: left;"  type="primary"  @click="addReceptionVisible = true">添加</el-button>
        <el-form :model="receptionQuery">
            <el-button style="float: right" icon="el-icon-lx-search" type="primary"  @click="selectreception"></el-button>
            <el-input type="text" v-model="receptionQuery.idCard" placeholder="身份证查询" style="float: right;width: 200px"></el-input>
            <el-input type="text" v-model="receptionQuery.name" placeholder="姓名查询" style="float: right;width: 200px"></el-input>
            <el-input type="text" v-model="receptionQuery.phone" placeholder="电话查询" style="float: right;width: 200px"></el-input>


        </el-form>
        <el-table
                :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)">

            <el-table-column
                    label="编号"
                    prop="id"
                    align="center"
                    sortable
            >
            </el-table-column>
            <el-table-column
                    label="姓名"
                    prop="name"
                    align="center">
            </el-table-column>

            <el-table-column
                    label="性别"
                    align="center">
                <template #default="scope">
                    <p v-if="scope.row.sex=='1'">男</p>
                    <p v-if="scope.row.sex=='2'">女</p>
                </template>
            </el-table-column>

            <el-table-column
                    label="身份证号"
                    prop="idCard"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="电话"
                    prop="phone"
                    align="center"
            >
            </el-table-column>

            <el-table-column
                    label="地址"
                    prop="address"
                    align="center"
                    width="200"
            >

            </el-table-column>


            <el-table-column label="操作" width="250" align="center">

                <template #default="scope">
                    <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                    <el-button type="text" icon="el-icon-refresh" style="color: #00ff19"
                               @click="handlerefresh(scope.$index, scope.row)">重置密码</el-button>
                </template>
            </el-table-column>

        </el-table>
        <center>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="list.length"
            >
            </el-pagination>
        </center>

        <el-dialog   v-model="addReceptionVisible"  width="420px" >
            <el-form ref="addForm" :model="addReception" :rules="rules">
                <h3 style="text-align: center">添加用户</h3>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="addReception.name" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="addReception.sex">
                        <el-radio :label="1" style="margin-left: 50px">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="身份证号" prop="idCard">
                    <el-input v-model="addReception.idCard" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="addReception.phone" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="家庭住址" prop="address">
                    <el-input v-model="addReception.address" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="addReception.password" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="passwords">
                    <el-input type="password" v-model="addReception.passwords" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="AddForm('addForm')">确 定</el-button></center>
            </div>
        </el-dialog>

        <el-dialog   v-model="dialogFormVisible" width="420px" >
            <el-form ref="editForm" :model="Reception" :rules="rules">
                <el-form-item label="编号" >
                    <el-input v-model="Reception.id" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="姓名"  prop="name">
                    <el-input v-model="Reception.name" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item >
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="Reception.sex">
                        <el-radio :label="1" style="margin-left: 50px">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="身份证号" prop="idCard">
                    <el-input v-model="Reception.idCard" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="Reception.phone" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="Reception.address" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="EditForm('editForm')">确 定</el-button></center>
            </div>
        </el-dialog>

        <el-dialog   v-model="deleteFormVisible" width="420px" >
            <center><h3>确认删除{{Reception.name}}?<br><br></h3></center>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="deleteFormVisible= false">取 消</el-button>
                    <el-button type="primary" @click="Deletereception">确 定</el-button></center>
            </div>
        </el-dialog>
        <el-dialog   v-model="refreshFormVisible" width="420px" >
            <center><h3>确认重置{{Reception.name}}的密码?<br><br></h3></center>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="refreshFormVisible= false">取 消</el-button>
                    <el-button type="primary" @click="OnSubmitrefresh">确 定</el-button></center>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import axios from "axios";
    import {ElMessage} from "element-plus";

    export default {
        name: "ReceptionList",
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    // if (this.user.passwords!== '') {
                    //     this.$refs.user.validateField('passwords');
                    // }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.addReception.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                list:{
                    id: 0,
                    name: "",
                    idCard: "",
                    phone: "",
                    password: "",
                    sex: 0,
                    age: "",
                    address: "",
                    deleted: 0,
                    gmtCreate: "",
                    gmtUpdate: "",
                    avatar: null
                },
                list:[],
                currentPage:1, //初始页
                pagesize:9,    //    每页的数据
                dialogFormVisible: false,
                addReceptionVisible: false,
                search:'',
                type:'',
                deleteFormVisible:false,
                Reception: {
                    id: 0,
                    name: "",
                    idCard: "",
                    phone: "",
                    password: "",
                    sex: 0,
                    age: "",
                    address: "",
                    deleted: 0,
                    avatar: null
                },
                addReception: {
                    id: '',
                    name: "",
                    idCard: "",
                    phone: "",
                    password: "",
                    sex: 0,
                    age: "",
                    address: "",
                    deleted: 0,
                    avatar: null
                },
                refreshFormVisible:false,
                receptionQuery:{
                    idCard: "",
                    name: "",
                    phone: ""
                },
                rules:{
                    name:[
                        {required:true,message:"姓名不可为空",trigger:'blur'}
                    ],
                    sex:[
                        {required:true,message:"性别不可为空",trigger:'blur'}
                    ],
                    age:[
                        {required:true,message:"性别不可为空",trigger:'blur'}
                    ],
                    idCard: [
                        {required:true,message:"身份证不可为空",trigger:'blur'},
                        { min: 18, max: 18, message: '请正确输入身份证号', trigger: 'blur' },
                    ],
                    phone:[
                        {required:true,message:"电话不可为空",trigger:'blur'},
                        { min: 11, max: 11, message: '请正确输入电话号码', trigger: 'blur' },
                    ],
                    login_name:[
                        {required:true,message:"登录昵称不可为空",trigger:'blur'}
                    ],
                    address:[
                        {required:true,message:"地址不可为空",trigger:'blur'}
                    ],
                    password: [
                        {required:true,message:"密码不可为空",trigger:'blur'},
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    passwords: [
                        {required:true,message:"第二次密码不可为空",trigger:'blur'},
                        { validator: validatePass2, trigger: 'blur' }
                    ],

                },
            }
        },
        created(){
            this.create();
        },
        activated(){
            this.create();
        },
        methods: {
            create(){
                axios.get("http://119.29.60.153:8001/doctorservice/reception/getAllReception").then(resp=> {
                    this.list = resp.data.data.list;
                    this.list.reverse();
                })
            },



            AddForm(formName){
                this.$refs[formName].validate((valid)=> {
                    if (valid) {
                        axios.post("http://119.29.60.153:8001/doctorservice/reception/addReception",this.addReception).then(resp=> {
                        if(resp.data.success==true){
                            ElMessage.success('添加成功');
                            this.addReception={};
                            this.addReceptionVisible = false;
                            this.create();
                        }
                        else ElMessage.error('添加失败');
                    })
                    }
                })
            },
            EditForm(formName){
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        axios.post("http://119.29.60.153:8001/doctorservice/reception/updateReception",this.Reception).then(resp=> {
                            if(resp.data.success==true){
                                ElMessage.success('修改成功');
                                this.dialogFormVisible = false;
                            }
                            else ElMessage.error('修改失败');
                        })
                    }else {
                        return false;
                    }
                })
            },

            selectreception(){
                axios.post("http://119.29.60.153:8001/doctorservice/reception/searchReception",this.receptionQuery).then(resp=> {
                    this.list = resp.data.data.list;
                })
            },


            Deletereception(){
                axios.delete("http://119.29.60.153:8001/doctorservice/reception/deleteReceptionById?id="+this.Reception.id).then(resp=> {
                    if(resp.data.success==true){
                        ElMessage.success('删除成功');
                        this.deleteFormVisible = false;
                        this.create();
                    }
                    else ElMessage.error('删除失败');
                })
            },

            OnSubmitrefresh(){
                axios.post("http://119.29.60.153:8001/doctorservice/reception/updateReception",this.Reception).then(resp=> {
                    if(resp.data.success==true){
                        ElMessage.success('密码重置成功！');
                        this.refreshFormVisible = false;
                    }
                    else ElMessage.error('密码重置失败！');
                })
            },

            handlerefresh(index,row){
                this.Reception= row;
                this.Reception.password='123';
                this.refreshFormVisible = true;
            },

            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },

            handleEdit(index,row){
                this.Reception= row;
                this.dialogFormVisible = true;
            },
            handleDelete(index,row){
                this.Reception= row;
                this.deleteFormVisible = true;
            }
        },
    }
</script>

<style scoped>
    .red{
        color: red;
    }
</style>